<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="ThemeBucket">
  <link rel="shortcut icon" href="#" type="image/png">

  <title>话题广场</title>

    <link th:href="@{/css/style.css}" rel="stylesheet">
    <link th:href="@{/css/style-responsive.css}" rel="stylesheet">

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>

  <![endif]-->
</head>

<body class="sticky-header left-side-collapsed">

<section>

    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <div class="header-section">

        <!--toggle button start-->
<!--        <a class="toggle-btn"><i class="fa fa-bars"></i></a>-->
        <!--toggle button end-->

        <!--search start-->
            <a href="http://localhost:8080"><img width="50" src="/img/logo.3f1b8b8b.png" alt=" "></a>
        <!--search end-->

        <!--notification menu start -->
        <div class="menu-right">
            <ul class="notification-menu">
                <li>
                    <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                        <i class="fa fa-envelope-o"></i>
                        <span class="badge">5</span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-head pull-right">
                        <h5 class="title">你有⑤个通知(该功能正在开发中.....)</h5>
                        <ul class="dropdown-list normal-list">
                            <li class="new">
                                <a href="">
<!--                                    <span class="thumb"><img src="images/photos/user1.png" alt="" /></span>-->
                                        <span class="desc">
                                          <span class="name">124001  <span class="badge badge-success">new</span></span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                </a>
                            </li>
                            <li>
                                <a href="">
<!--                                    <span class="thumb"><img src="images/photos/user2.png" alt="" /></span>-->
                                        <span class="desc">
                                          <span class="name">Jonathan Smith</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                </a>
                            </li>
                            <li>
                                <a href="">
<!--                                    <span class="thumb"><img src="images/photos/user3.png" alt="" /></span>-->
                                        <span class="desc">
                                          <span class="name" >Jane Doe</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                </a>
                            </li>
                            <li>
                                <a href="">
<!--                                    <span class="thumb"><img src="images/photos/user4.png" alt="" /></span>-->
                                        <span class="desc">
                                          <span class="name">Mark Henry</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                </a>
                            </li>
                            <li>
                                <a href="">
<!--                                    <span class="thumb"><img src="images/photos/user5.png" alt="" /></span>-->
                                        <span class="desc">
                                          <span class="name">Jim Doe</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                </a>
                            </li>
                            <li class="new"><a href="">Read All Mails</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<!--                        <img src="images/photos/user-avatar.png" alt="" />-->
<!--                        <span th:text="${session.userNo}"/>-->
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                        <li><a href="#"><i class="fa fa-user"></i>  Profile</a></li>
                        <li><a href="#"><i class="fa fa-cog"></i>  Settings</a></li>
                        <li><a href="#"><i class="fa fa-sign-out"></i> Log Out</a></li>
                    </ul>
                </li>

            </ul>
        </div>
        <!--notification menu end -->

        </div>
        <!-- header section end-->

        <!-- page heading start-->
        <div class="page-heading">
<!--            Page Tittle goes here-->
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <section class="panel">
                <header class="panel-heading">
                    Default Buttons
                    <span class="tools pull-right">
                    <a class="fa fa-chevron-down" href="javascript:;"></a>
                    <a class="fa fa-times" href="javascript:;"></a>
                </span>
                </header>

            </section>

            <div class="row blog">
                <div class="col-md-2">
                    <form action="#" method="post">
                        <input type="text" name="keyword" placeholder="Search here..." />
                    </form>
<!--                    <div class="panel">-->
<!--                        <div class="panel-body">-->
<!--                            <div class="blog-post">-->
<!--                                <h3>热门话题</h3>-->
<!--                                <div class="media">-->
<!--                                    <a href="javascript:;" class="pull-left">-->
<!--                                        <img alt="" src="images/blog/coffe1.jpg" class=" ">-->
<!--                                    </a>-->
<!--                                    <div class="media-body">-->
<!--                                        <h5 class="media-heading">店铺名: </h5>-->
<!--                                        <br/>-->
<!--                                        <h5 class="media-heading" >平均消费:元</h5>-->
<!--                                        <p>-->
<!--                                            评分:-->
<!--                                        </p>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
                </div>

                <div class="col-md-9">
                    <div class="panel" th:each="topic:${page}">
                        <div class="panel-body">
                            <div class="row">
<!--                                <div class="col-md-5">-->
<!--                                    <div class="blog-img-sm">-->
<!--                                        <img src="images/blog/cafein.jpg" alt="">-->
<!--                                    </div>-->
<!--                                </div>-->
                                <div class="col-md-7" >
                                    <h3 class="" style="font-size: xx-large" th:text="${topic.getTitle()}">Neque porro quisquam est qui dolo</h3>
                                    <p>发帖者: [[${topic.getPoster()}]]  |  [[${topic.getPosttime()}]]   |   板块: 
                                    </p>
                                    <h3 class="" style="font-size: x-large" th:text="${topic.getTcontent()}"></h3>
                                    <p class="" style="color: #7A7676">话题编号: [[${topic.getTno()}]]</p>
<!--                                    <p class="" style="color: #7A7676">评论数量: [[${topic.getTnum()}]]</p>-->
                                    <a th:href="@{/topic_detail/{tno}(tno=${topic.getTno()})}" class="more">查看详情</a>
                                </div>
                                <div class="col-md-5">
                                    <div class="blog-img-sm">
<!--                                        <img src="images/blog/cafein.jpg" alt="">-->
                                    </div>
                                </div>
<!--                                <div class="col-md-5" >-->
<!--                                </div>-->
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--body wrapper end-->



        <!--发布新话题的modal-->
        <form method="post" th:action="addnewtopic">
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">发表新话题</h4>
                    </div>

                    <div class="modal-body row">

                        <div class="col-md-5 img-modal">
<!--                            <img src="images/gallery/image1.jpg" alt="">-->
<!--                            <a href="#" class="btn btn-white btn-sm"><i class="fa fa-pencil"></i> 上传图片</a>-->
                            <p><strong>标签1:</strong> tag1</p>
<!--                            <select id="choice-box-menu-item" name="tagname" class="form-select-button">-->
<!--                                <option th:each="tags:${tag}" name="tagname" th:value="${tags.getTagname()}" th:text="${tags.getTagname()}"></option>-->
<!--                            </select>-->
<!--                            <p><strong>发布者 : [[${session.userNo}]]</strong> <a href="#">[[${session.userNo}]]</a></p>-->
                        </div>
                        <div class="col-md-7">
                            <div class="form-group">
                                <label> 话 题 标 题</label>
                                <input name="title" id="title" value="起一个概括性的话题名吧" class="form-control">
                            </div>
                            <div class="form-group">
                                <label> 话题描述</label>
                                <textarea rows="20" name="tcontent" class="form-control"></textarea>
                            </div>
                            <div class="pull-right">
                                <button class="btn btn-success" type="submit">确认发表</button>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
        </form>
        <!--发布新话题的modal end-->


        <!--footer section start-->
        <footer class="sticky-footer">
            <div class="btn-group" >
                <a class="btn btn-danger btn-sm" type="button" href="#myModal" data-toggle="modal"> 发表新话题</a>

                <a class="btn btn-default btn-sm" type="button" href="#myModal2" data-toggle="modal2"> 发布定向通知(该功能只有教师可见)</a>
            </div>
        </footer>
        <!--footer section end-->
    </div>

    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<script th:src="@{/js/jquery-1.10.2.min.js}"></script>
<script th:src="@{/js/jquery-ui-1.9.2.custom.min.js}"></script>
<script th:src="@{/js/jquery-migrate-1.2.1.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/modernizr.min.js}"></script>
<script th:src="@{/js/jquery.nicescroll.js}"></script>

<!--common scripts for all pages-->
<script th:src="@{/js/scripts.js}"></script>
<script>
   var ww = $(window).width()
   $(window).resize(function(){
       if (ww < 800){
           $(body).removeClass('left-side-collapsed');
       }

   });
</script>

</body>
</html>
